<template>
    <el-container class="home-container">
        <el-header>
            <div class="logo"><img src="../../assets/img/touxiang.jpg" alt=""></div>
            <div class="title">新冠物资管理系统</div>
            <div class="operation">
                <!-- 下拉菜单 -->
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <img src="../../assets/img/touxiang.jpg" alt="">
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人信息</el-dropdown-item>
                        <el-dropdown-item>订单管理</el-dropdown-item>
                        <el-dropdown-item divided>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="isCollapse ? '65px':'200px'">
                <div class="collapseBtn" @click="isCollapse = !isCollapse;" width="isCollapse ? '65px':'200px'">
                    | | |
                </div>

                <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                    :collapse-transition="false" text-color="#f4f7fa" unique-opened router>
                    <Menu :menuData="menuData"></Menu>
                </el-menu>

            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import {
        getMenuTree
    } from '../../api/menu'
    import Menu from '../../components/MenuTree/index.vue';
    export default {
        name: "Home",
        data() {
            return {
                isCollapse: false, //控制侧边栏拉开关闭
                menuData: [], //侧边菜单栏数据
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                   console.log(key, keyPath);
            },
            //异步
            async getMenuList() {
                let result = await getMenuTree();
                //console.log(result.data.menuTree)
                this.menuData = result.data.menuTree;
            }

        },
        components: {
            Menu,
        },
        created() {
            this.getMenuList();

        },
    }
</script>

<style lang="less" scoped>
    .el-header {
        background-color: #272c33;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo {
            img {
                border-radius: 50%;
                width: 50px;
                height: 50px;
            }
        }

        .operation {
            img {
                border-radius: 50%;
                width: 50px;
                height: 50px;
            }

            .el-dropdown-link {
                cursor: pointer;
                color: #000;
            }

            .el-icon-arrow-down {
                font-size: 24px;
            }
        }

        .title {
            font-size: 26px;
            color: #f4f7fa;
        }


    }

    .el-aside {
        height: 100vh;
        background-color: #272c33;

        .collapseBtn {
            background-color: #272c33;
            text-align: center;
            cursor: pointer;
            line-height: 35px;
        }

        .el-menu-vertical-demo {
            border: 0px;
            width: 65px;
        }

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
        }
    }

    .el-main {
        height: 100%;
        width: 100vw;
        background-color: #D3DCE6;
    }
</style>